<template>
  <div>
    <common-header title="商品列表"></common-header>
    <div class="list-wrap">
      <div class="sortHead">
        <div :class="['price', {active: active.orderBy === 0}]" @click="byPrice">
          <span>价格</span>
          <div :class="['symbol', 'up', {active: active.sortBy === 0 && active.orderBy === 0}]"></div>
          <div :class="['symbol', 'down', {active: active.sortBy === 1 && active.orderBy === 0}]"></div>
        </div>
         <div :class="['sale', {active: active.orderBy === 1}]" @click="bySale">
          <span>销量</span>
          <div :class="['symbol', 'up', {active: active.sortBy === 0 && active.orderBy === 1}]"></div>
          <div :class="['symbol', 'down', {active: active.sortBy === 1 && active.orderBy === 1}]"></div>
        </div>
         <div :class="['new', {active: active.orderBy === 2}]" @click="byNew">
          <span>新品</span>
          <div :class="['symbol', 'up', {active: active.sortBy === 0 && active.orderBy === 2}]"></div>
          <div :class="['symbol', 'down', {active: active.sortBy === 1 && active.orderBy === 2}]"></div>
        </div>
      </div>
      <div class="goodsList">
        <div class="item" v-for="(list, index) in lists" :key="list.id" @click="enterDetail(list.id, index)">
          <img :src="list.pic" alt="">
        <p>{{list.name}}</p>
        <div class="itemPrice">
          <div>
            <span class="price">{{list.minPrice | currency}}</span>
            <s>{{list.originalPrice | currency}}</s>
          </div>
          <van-icon class="iconfont" class-prefix="icon" name="jiahao" color="#f66" size="26"></van-icon>
        </div>
      </div>
    </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@components/CommonHeader'
import { getList } from '@api'
import { currency } from '@filters'
export default {
  data () {
    return {
      active: {
        orderBy: 0, // 0是价格，1是销量，2是新品
        sortBy: 0 // 0是升序，1是降序
      },
      orderBy: 'priceUp',
      lists: []
    }
  },
  methods: {
    enterDetail (id) {
      this.$router.push(`/detail/${id}`)
    },
    byPrice () {
      // 如果是从价格以为的地方点进来 默认是价格升序
      if (this.active.orderBy === 1 || this.active.orderBy === 2) {
        this.active.orderBy = 0
        this.active.sortBy = 0
        this.orderBy = 'priceUp'
      } else {
        // 这里直接进来就是价格
        if (this.active.sortBy === 1) {
          this.active.sortBy = 0
          this.orderBy = 'priceUp'
        } else {
          this.active.sortBy = 1
          this.orderBy = 'priceDown'
        }
      }
      this.fetchList()
    },
    bySale () {
      // 如果是从销量以为的地方点进来  默认销量降序
      if (this.active.orderBy === 0 || this.active.orderBy === 2) {
        this.active.orderBy = 1
        this.active.sortBy = 1
        this.orderBy = 'ordersDown'
      } else {
        // 这里直接进来就是价格
        if (this.active.sortBy === 1) {
          this.active.sortBy = 0
          this.orderBy = 'ordersUp'
        } else {
          this.active.sortBy = 1
          this.orderBy = 'ordersDown'
        }
      }
      this.fetchList()
    },
    byNew () {
      // 如果是从新品以为的地方点进来  默认新品降序
      if (this.active.orderBy === 0 || this.active.orderBy === 1) {
        this.active.orderBy = 2
        this.active.sortBy = 1
        this.orderBy = 'addedDown'
      } else {
        // 这里直接进来就是价格
        if (this.active.sortBy === 1) {
          this.active.sortBy = 0
          this.orderBy = 'addedUp'
        } else {
          this.active.sortBy = 1
          this.orderBy = 'addedDown'
        }
      }
      this.fetchList()
    },
    fetchList () {
      getList({
        categoryId: this.$route.params.id,
        orderBy: this.orderBy
      }).then(res => {
        this.lists = res.data.data
      })
    }
  },
  components: {
    CommonHeader
  },
  created () {
    this.fetchList()
  },
  filters: {
    currency
  }
}
</script>

<style lang="scss" scoped>
.list-wrap {
  padding-top: 56.25px;
  .sortHead {
    height: 30px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    border-top: 1px solid #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-weight: 700;
    color: #999;
    font-size: 14PX;
    .price,.sale,.new {
      position: relative;
       &.active {
        color: #000;
      }
      .symbol {
        width: 0;
        height: 0;
        border: 4px solid transparent;
      }
      .up {
        position: absolute;
        border-bottom-color: #999;
        right: -10px;
        top: -2px;
        &.active{
          border-bottom-color: #000;
        }
      }
      .down {
        position: absolute;
        border-top-color: #999;
        right: -10px;
        top: 9px;
        &.active {
          border-top-color: #000;
        }
      }
    }
  }
}
.goodsList {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    padding: 5PX;
    .item {
    width: 50%;
    box-sizing: border-box;
    padding: 5PX;
    img {
      width: 100%;
    }
    p {
      margin-top: 10PX;
      color: #444;
      font-size: 16PX;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .itemPrice {
      margin-top: 10PX;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .price {
        color: #f66;
        font-size: 16PX;
      }
      s {
        color: #ccc;
        font-size: 14PX;
        margin-left: 5PX;
      }
    }
  }
}

</style>
